Ext.define('Jason.view.protal.dashboard.Dashboard', {
    extend: 'Ext.container.Container',
    requires: [
        'Ext.ux.layout.ResponsiveColumn',
		'Jason.view.protal.dashboard.DashboardController',
		'Jason.view.protal.dashboard.DashboardViewModel',
		'Wys.view.TimeLine',
		'Wys.view.ECharts',
		'Wys.view.CardView'
    ],
    controller: 'dashboard',
    viewModel: {
        type: 'dashboard'
    },
    //layout: 'responsivecolumn',
    items: [
		{
			xtype : 'container',
			layout : {
				type : 'hbox'
			},
			items : [
				{	
					xtype : 'cardView',
					flex:.25,
					margin : '0 8 8 0',
					config:{
						title : '测试1',
						num : 1,
						center : '测试',
						footer : '测试'
					}
				},
				{	
					xtype : 'cardView',
					flex:.25,
					margin : '0 8 8 0',
					config:{
						title : '测试2',
						num : 1,
						center : '测试',
						footer : '测试'
					}
				},
				{	
					xtype : 'cardView',
					flex:.25,
					margin : '0 8 8 0',
					config:{
						title : '测试3',
						num : 1,
						center : '测试',
						footer : '测试'
					}
				},
				{	
					xtype : 'cardView',
					flex:.25,
					margin : '0 0 8 0',
					config:{
						title : '测试4',
						num : 1,
						center : '测试',
						footer : '测试'
					}
				}
			]
		},{
			xtype : 'echart',
			flex:1,
			eConfig : {
				option : {
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['投保人数','月新增人数','月新减人数']
					},
					toolbox: {
						show : true,
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					calculable : true,
					xAxis : [
						{
							type : 'category',
							boundaryGap : false,
							data : ['2016-09','2016-10','2016-11','2016-12','2017-01','2017-02','2017-03','2017-04','2017-05','2017-06','2017-07','2017-08']
						}
					],
					yAxis : [
						{
							type : 'value'
						}
					],
					series : [
						{
							name:'投保人数',
							type:'line',
							stack: '总量',
							itemStyle : { normal: {label : {show: true, position: 'top'}}},
							data:[120, 132, 101, 134, 90, 230, 210]
						},
						{
							name:'月新增人数',
							type:'line',
							stack: '总量',
							itemStyle : { normal: {label : {show: true, position: 'top'}}},
							data:[220, 182, 191, 234, 290, 330, 310]
						},
						{
							name:'月新减人数',
							type:'line',
							stack: '总量',
							itemStyle : { normal: {label : {show: true, position: 'top'}}},
							data:[150, 232, 201, 154, 190, 330, 410]
						}
					]
				}
			},
			margin : '0 0 8 0',
			height :350
		},{
			xtype : 'container',
			layout : {
				type : 'hbox'
			},
			items : [
				{xtype : 'echart',height:250,flex:.5,margin : '0 8 8 0',
					eConfig : {
						option :{
							title : {
								text: '某站点用户访问来源',
								subtext: '纯属虚构',
								x:'center'
							},
							tooltip : {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								left: 'left',
								data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
							},
							series : [
								{
									name: '访问来源',
									type: 'pie',
									radius : '55%',
									center: ['50%', '60%'],
									data:[
										{
											value:335,
											name:'直接访问',
											tooltip:"直接访问：\<br/\>用户：测试\<br/\>数量：335"
										},
										{
											value:310,
											name:'邮件营销',
											tooltip:"邮件营销：\<br/\>测试"
										},
										{value:234, name:'联盟广告'},
										{value:135, name:'视频广告'},
										{value:1548, name:'搜索引擎'}
									],
									itemStyle: {
										emphasis: {
											shadowBlur: 10,
											shadowOffsetX: 0,
											shadowColor: 'rgba(0, 0, 0, 0.5)'
										}
									}
								}
							]
						}
					}
				},
				{xtype : 'echart',height:250,flex:.5,
					eConfig : {
						option :{
							title: {
								text: '漏斗图',
								subtext: '纯属虚构',
								left: 'left',
								top: 'bottom'
							},
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c}%"
							},
							toolbox: {
								orient: 'vertical',
								top: 'center',
								feature: {
									dataView: {readOnly: false},
									restore: {},
									saveAsImage: {}
								}
							},
							legend: {
								orient: 'vertical',
								left: 'left',
								data: ['展现','点击','访问','咨询','订单']
							},
							calculable: true,
							series: [
								{
									name: '漏斗图',
									type: 'funnel',
									width: '40%',
									height: '45%',
									left: '5%',
									top: '50%',
									data:[
										{value: 60, name:'访问'},
										{value: 30, name:'咨询'},
										{value: 10, name:'订单'},
										{value: 80, name:'点击'},
										{value: 100, name:'展现'}
									]
								},
								{
									name: '金字塔',
									type: 'funnel',
									width: '40%',
									height: '45%',
									left: '5%',
									top: '5%',
									sort: 'ascending',
									data:[
										{value: 60, name:'访问'},
										{value: 30, name:'咨询'},
										{value: 10, name:'订单'},
										{value: 80, name:'点击'},
										{value: 100, name:'展现'}
									]
								},
								{
									name: '漏斗图',
									type:'funnel',
									width: '40%',
									height: '45%',
									left: '55%',
									top: '5%',
									label: {
										normal: {
											position: 'left'
										}
									},
									data:[
										{value: 60, name: '访问'},
										{value: 30, name: '咨询'},
										{value: 10, name: '订单'},
										{value: 80, name: '点击'},
										{value: 100, name: '展现'}
									]
								},
								{
									name: '金字塔',
									type:'funnel',
									width: '40%',
									height: '45%',
									left: '55%',
									top: '50%',
									sort: 'ascending',
									label: {
										normal: {
											position: 'left'
										}
									},
									data:[
										{value: 60, name: '访问'},
										{value: 30, name: '咨询'},
										{value: 10, name: '订单'},
										{value: 80, name: '点击'},
										{value: 100, name: '展现'}
									]
								}
							]
						}
					}
				}
			]
		},{
			xtype: 'timeline',
			flex:1,
			bind : '{timelineStore}'
		}
    ]
});
